/*
 * @Author: yangrongxin
 * @Date: 2021-08-16 14:48:54
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-08-16 15:45:31
 */
import { useReducer } from 'react';
import { View, Text, Button, Input, Textarea } from '@tarojs/components';
import { AtInput } from 'taro-ui';

function reducer(state, action) {
  if (action.type === 'update') {
    return {
      ...state,
      ...action.payload,
    };
  }
}

// TODO: 延期为后面完成
const HelpFeedback = () => {
  const [info, updateInfo] = useReducer(reducer, {
    phone: '',
  });

  /* 更新接口数据 */
  const updateValue = (payload) => {
    updateInfo({
      type: 'update',
      payload,
    });
  };

  const { phone } = info;

  return (
    <View>
      {/* 选择问题类型的单选框 */}
      <View>
        <View>
          <Text>遇到问题</Text>
        </View>
        <View>
          <Text>功能建议</Text>
        </View>
      </View>
      {/* 输入内容 */}
      <View>
        <Textarea placeholder="请输入内容" />
      </View>
      {/* 输入手机号码 */}
      <View>
        <AtInput
          name="phone"
          value={phone}
          placeholder="手机号"
          onChange={(value: string) => updateValue({ phone: value })}
        />
      </View>
      {/* 提交按钮 */}
      <Button
        onClick={() =>
          Taro.showToast({
            title: '敬请期待',
            icon: 'none',
          })
        }
      >
        提交
      </Button>
    </View>
  );
};

export default HelpFeedback;
